<template>
	<view>
		<view class="container">
			<view class="novel_list">
				<view class="novel_item" v-for="(item, index) in novel_list" :key="index"
					@click="to_novel_xiangqing(item)">
					<view class="img">
						<image :src="item.img" mode="widthFix"></image>
					</view>
					<view class="title">
						{{item.name}}
					</view>
				</view>

			</view>
		</view>
		<view class="xuanfuanniu" @click="dianji">
			+
		</view>
		<!-- 显示居中弹窗 添加人物-->
		<!-- 普通弹窗 -->
		<uni-popup ref="tianjia" background-color="#fff" @change="change" class="fuchuang">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<h3>添加小说：</h3>
				<form>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="novel.name" placeholder="小说名字"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="novel.img" placeholder="封面图片:"></uni-easyinput>
					<button @click="addnovelimage">添加封面图片</button>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="novel.author" placeholder="作者"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="novel.category"
						placeholder="分类"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="novel.tags"
						placeholder="标签['-'隔开]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="novel.contain"
						placeholder="小说简介"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="novel.grade" placeholder="小说等级"></uni-easyinput>
					<button type="button" @click="submitForm">提交</button>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isxiugai: true,
				novel_list: [],
				novel: {
					_id: '',
					author: '',
					name: '',
					contain: '',
					category: '',
					tags: '',
					img: '',
					grade: ''
				}
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '小说'
			});


			if (uni.getStorageSync('novel_list')) {
				let novel_list = uni.getStorageSync('novel_list'); // 从本地缓存中取出名为novelData的数据
				this.novel_list = novel_list;
			} else {
				// 不存在novel属性
				this.getdata()
			}

		},
		methods: {
			getdata() {
				uniCloud.callFunction({
					name: "get_novel"
				}).then(res => {
					console.log(res.result.data);
					this.novel_list = res.result.data;
					uni.setStorageSync('novel_list', res.result.data); // 将e数据保存到名为novelData的本地缓存中
				})
			},
			dianji() {
				this.$refs.tianjia.open('center')

			},
			submitForm() {
				console.log(this.novel);
				let obj = this.novel;
				let novel_list = uni.getStorageSync('novel_list'); // 从本地缓存中取出名为novelData的数据
				this.novel_list.push(obj)
				novel_list.push(obj)
				uni.setStorageSync('novel_list', novel_list); // 将e数据保存到名为novelData的本地缓存中
				uniCloud.callFunction({
					name: "add_novel",
					data: obj
				}).then(res => {
					console.log(res);
					
				})


			},
			to_novel_xiangqing(e) {
				console.log(e);
				uni.setStorageSync('novelData', e); // 将e数据保存到名为novelData的本地缓存中
				uni.navigateTo({
					//url: '/pages/shijianxiangxi/shijianxiangxi',
					url: '/pages/to_novel_xiangqing/to_novel_xiangqing?command=0&a=' + encodeURIComponent(JSON.stringify(e))
				});
			},
			//添加小说封面图片
			addnovelimage() {
				let that = this;
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量，默认为 9
					sizeType: ['original', 'compressed'], // 可以指定选择原图或压缩图，默认为 ['original', 'compressed']
					sourceType: ['album', 'camera'], // 可以指定选择图片的来源，默认为 ['album', 'camera']
					success: function(res) {
						// 选择图片成功
						let tempFilePaths = res.tempFilePaths; // 图片的临时文件路径数组
						console.log('选择的图片路径:', tempFilePaths);
						const name = res.tempFiles[0].name // 选择图片的名称.后缀名
						console.log(name);
						uniCloud.uploadFile({
							filePath: tempFilePaths[0],
							cloudPath: Date.now() + "-" + name, // 这样写上传的图片后缀名就是原本的后缀名（也就是我最终想实现的效果）
						}).then(res => {
							console.log(res.fileID)
							that.novel.img = res.fileID;
							uni.hideLoading(),
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								});
						})
					},
					fail: function(err) {
						// 选择图片失败
						console.error('选择图片失败:', err);
					}
				});
			},
		}
	}
</script>


<style scoped lang="scss">
	.container {
		background-color: palegoldenrod;

		.novel_list {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.novel_item {
				text-align: center;
				width: 30%;
				margin-left: 3px;
				background-color: palegreen;
				height: 150px;
				margin-bottom: 2px;
				border-radius: 10px;
				overflow: hidden;

				.img {
					display: flex;
					align-items: center;
					height: 120px;
					background-color: saddlebrown;

					image {
						width: 100%;
					}
				}

				.title {
					line-height: 30px;
				}
			}
		}
	}

	.xuanfuanniu {
		height: 50px;
		width: 50px;
		font-size: 25px;
		color: #fff;
		background-color: #23DA36;
		text-align: center;
		line-height: 50px;
		position: fixed;
		bottom: 100px;
		right: 50px;
		z-index: 1500;
		border-radius: 50%;
	}
</style>